<template>
  <el-drawer destroy-on-close size="800" v-model="弹窗否" :show-close="false" :before-close="详情窗口.关窗">
    <template #header>
      <div class="flex justify-between items-center">
        <span class="text-lg">{{ !单项.id ? '新增ing' : '编辑ing' }}</span>
        <div>
          <el-button type="primary" @click="详情窗口.提交">确 定</el-button>
          <el-button @click="详情窗口.关窗">取 消</el-button>
        </div>
      </div>
    </template>
    <el-form :model="单项" label-position="top" ref="formRef" :rules="rule" label-width="80px">
      <el-form-item label="类别:" prop="类别">
        <el-input v-model="单项.类别" :clearable="true" placeholder="请输入类别" />
      </el-form-item>
      <el-form-item label="父级类别:" prop="父级id">
        <el-select v-model="单项.父级id" placeholder="请选择父级类别" style="width:100%" :clearable="true">
          <el-option v-for="(item, key) in list.a.字段值选项集.父级id" :key="key" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<script setup>
const props = defineProps({
  list: Object,
})
// console.log(`props 👉`, props)

import use详情窗口 from '@/amtf/hooks/use详情窗口';
const 详情窗口 = use详情窗口({ list: props.list })
// const 详情窗口 = use详情窗口()
const { 弹窗否, 单项, 初始化, formRef, rule, a } = 详情窗口

defineExpose({ 初始化 })

</script>

<style></style>
